<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>学生成绩</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <div class="echarts" id="echarts-bar-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>折线</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-scatter-chart"></div>
                    </div>
                </div>
            </div>
        </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <script type="text/javascript">
        var prefix = ctx + "system/score";

        var d = "";
	    $(function () {

	        $.operate.post(prefix+"/list",d,function (data) {
                getStuScore(data);
            })

	        $.operate.post(prefix+"/getEchartsForPolyline",d,function (data) {
                getPolyline(data);
            })

	    });



	    function getStuScore(data) {
	        var rows = data.rows;
            var names = new Array();
            var score = new Array();
            var point = new Array();
            for (var i = 0; i < rows.length; i++) {
                names.push(rows[i].sName)
                score.push(rows[i].score)
                point.push(rows[i].point)

            }
            var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
            var baroption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    data: ['单科成绩','绩点']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: names,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '水量',
                        min: 0,
                        max: 100,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} '
                        }
                    },
                    {
                        type: 'value',
                        name: '绩点',
                        min: 0,
                        max: 5,
                        interval: 1,
                        axisLabel: {
                            formatter: '{value} '
                        }
                    }
                ],
                series: [
                    {
                        name: '单科成绩',
                        type: 'bar',
                        data: score
                    },
                    {
                        name: '绩点',
                        type: 'bar',
                        data: point
                    }
                ]
            };
            barChart.setOption(baroption);

            window.onresize = barChart.resize;
        }


	    function getPolyline(data) {
            var dict_label = new Array();
            var str =  new Array();
            for (var i = 0; i < data.length; i++) {
                dict_label.push(data[i].dict_label)
                var datas = new Array();
                datas.push(data[i].cof, data[i].cos, data[i].cot, data[i].cofo, data[i].cofir, data[i].cosix);
                var s =  {
                    name: data[i].dict_label,
                    type: 'line',
                    stack: '总量',
                    data: datas
                }
                str.push(s);
            }
            var barChart = echarts.init(document.getElementById("echarts-scatter-chart"));
            var baroption = {
                title: {
                    text: '折线图堆叠'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: dict_label
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['40-50', '51-59', '60-70 ', '71-80', '81-90', '91-100']
                },
                yAxis: {
                    type: 'value'
                },
                series:str
            };
            barChart.setOption(baroption);

            window.onresize = barChart.resize;
        }
    </script>
</body>
</html>
